<template>
  <div>
    <!-- ● <el-menu> 的属性
  ○ router  加入它，表示使用 index值作为路由跳转地址
  ○ mode（horizontal 表示水平菜单；  vertical 垂直菜单,默认就是垂直菜单）
  ○ background-color 菜单的背景颜色
  ○ text-color 文字颜色
  ○ active-text-color 激活时文字颜色
  ○ default-active="某个菜单的index值"   表示默认激活哪一项
    ■ :default-active="$route.path"
  ○ unique-opened  加入这个属性，不用给值，表示做排它效果
● 所有子项（<el-menu-item>  和  <el-submenu>）的属性
  ○ index 每个菜单的index不能重复，表示菜单的唯一标识（很有用） -->
    <el-container>
      <el-aside width="200px">
        <!-- 菜单  index后的值不能相同 -->
        <el-menu
          router
          mode="horizontal"
          text-color="pink"
          background-color="skyblue"
          active-text-color="red"
          :default-active="$route.path"
          unique-opened
        >
          <el-submenu index="14">
            <template #title>大饼 </template>
            <el-menu-item index="/dashboard">早饭</el-menu-item>
            <el-submenu index="12">
              <template #title>白菜 </template>
              <el-menu-item index="7">早饭</el-menu-item>
            </el-submenu>
            <el-menu-item index="5">早饭</el-menu-item>
          </el-submenu>
          <el-menu-item index="1">早饭</el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'ObjA'
}
</script>

<style lang="scss">
.el-container {
  height: 100vh;
  .el-aside {
    height: 100%;
    background-color: pink;
  }
  .el-header {
    background-color: cadetblue;
  }
}
</style>
